<template>
  <div :data="tableData">
    <el-container>
      <el-header><top-bar></top-bar></el-header>
      <el-main
        ><search-bar></search-bar>
        <div>
          <el-card class="card">
            <!-- <div style="text-align: left">
              <span>数码家电/数码产品/单反相机/佳能EOS 佳能6D Mark II</span>
            </div> -->
            <table style="margin: auto">
              <tr>
                <td id="commodity-picture">
                  <div id="box" style="padding: 10px">
                    <pic-zoom :url="urll" :scale="2.5"></pic-zoom>
                  </div>
                  <div class="picture-row">
                    <div
                      class="block"
                      v-for="(item, index) in urls.pictureUrl"
                      :key="index"
                    >
                      <el-image
                        @click="getUrlIndex(index)"
                        style="width: 100px; height: 100px"
                        :src="item"
                        fit="cover"
                      ></el-image>
                    </div>
                  </div>
                </td>
                <td id="commodity-presentation">
                  <!-- 商品名称 -->
                  <div id="commodity-name">
                    {{ tableData.commodityName }}
                  </div>
                  <!-- 商品简介 -->
                  <div id="commodity-remarks">
                    {{ tableData.productDetails }}
                  </div>
                  <el-divider></el-divider>
                  <!-- 彩条 -->
                  <div id="commodity-info">
                    <div id="colour-bar">就爱优品</div>

                    <!-- 价格 -->
                    <div style="font-size: 20px; color: red; margin-top: 10px">
                      商品价格:￥{{ tableData.commodityCurrentPrice }}
                    </div>
                    <!-- <div
                      style="
                        font-size: 15px;
                        margin-top: 30px;
                        text-decoration: line-through;
                      "
                    >
                      原价:￥11190
                    </div> -->

                    <!-- 库存 -->
                    <div style="margin-top: 30px">
                      库存:{{ tableData.productStocks }}
                    </div>

                    <el-divider content-position="left">选择规格:</el-divider>
                    <!-- 商品规格 -->
                    <div>
                      <div
                        v-for="(item, index) in supArr"
                        :key="item.id"
                        @click="guige(index)"
                      >
                        <el-radio v-model="radio1" :label="index" border>
                          {{ item.specificationsName }}
                        </el-radio>
                      </div>

                      <!-- 计数器 -->
                      <div>
                        <el-input-number
                          v-model="num"
                          :min="1"
                          :max="10"
                          label="描述文字"
                        ></el-input-number>
                        <el-button
                          @click="toBuy"
                          style="margin-left: 80px"
                          type="warning"
                          >立即购买</el-button
                        >
                        <el-button
                          @click="
                            addShopCart();
                            tishi();
                          "
                          type="warning"
                          plain
                          >加入购物车</el-button
                        >
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
            <div>
              <el-tabs class="estimate" type="border-card">
                <el-tab-pane label="商品详情">
                  <label style="font-size: 20px; font-weight: bold"
                    >品名：</label
                  >
                  <span>{{ tableData.commodityName }}</span>
                  <el-divider></el-divider>
                  <label style="font-size: 20px; font-weight: bold"
                    >供应商：</label
                  >
                  <span>{{ tableData.brandname }}</span>
                  <el-divider></el-divider>
                </el-tab-pane>
                <el-tab-pane label="买家评价">
                  <table>
                    <tr>
                      <td>
                        <label>好评度</label>
                        <div style="font-size: 50px; color: maroon">89%</div>
                      </td>
                      <td style="font-size: 80px">
                        <el-divider direction="vertical"></el-divider>
                      </td>
                      <td>
                        <div>大家都在说</div>
                        <div style="margin-top: 20px; float: left">
                          <el-button type="warning" plain round
                            >全部(9999+)</el-button
                          >
                          <el-button type="warning" plain round
                            >有图(8856)</el-button
                          >
                        </div>
                      </td>
                    </tr>
                  </table>
                  <el-divider></el-divider>
                  <ul>
                    <li>
                      <el-card class="estimate-card">
                        <div>
                          <span id="username">用户名</span>
                          <span id="date">2021-08-21</span>
                        </div>
                        <div id="comment">
                          这是一条评这是一条评这是一条评价这这是一条评这是一条评价这是一条评价这是一条评价价这是一条评这是一条评价这是一条评价这是一条评价价这是一条评这是一条评价这是一条评价这是一条评价价是一条评价这是一条评价价这是一条评这是一条评价这是一条评价这是一条评价价这是一条评价这是一条评价这是一条评价价
                        </div>
                      </el-card>
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-card>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<script>
import TopBar from "../TopBar/TopBar.vue";
import SearchBar from "../SearchBar/SearchBar.vue";
import PicZoom from "vue-piczoom";
import {
  addShoppingCart,
  getCommodity,
  findDetaildImgsByCommodityId,
} from "../../../api/Commodity";
export default {
  components: {
    TopBar,
    SearchBar,
    PicZoom,
  },
  data() {
    return {
      // 计数器
      num: "1",
      // 规格选择
      radio1: "1",
      // 显示评价
      radio2: "1",
      comIdObj: {
        comId: 0,
      },
      tableData: [],
      supArr: [],
      supName: [],
      Specifications: [],
      specificationsindex: "",
      specificationsName: "",
      specificationsid: "",
      userId: localStorage.getItem("userId"),
      price: "",

      // 商品预览图的路径demo
      urll: require("../../../imgs/6D Mark II(1).jpg"),
      urls: {
        pictureUrl: [],
      },
    };
  },
  methods: {
    // 加入购物车提示
    tishi() {
      if (this.specificationsid) {
        this.$message("商品已加入购物车");
      } else {
        this.$message.error("请选择规格");
      }
    },

    //规格找到index下标
    guige(index) {
      console.log(index);
      this.specificationsindex = index;

      // 找到选择的规格Id
      var b = this.specificationsindex;
      var a = this.supArr[b];
      this.price = a.price;
      var specificationsid = a.id;
      this.specificationsid = specificationsid;
      console.log(this.specificationsid);
    },
    // 监听点击的是哪张图
    getUrlIndex(index) {
      this.urll = this.urls.pictureUrl[index];
    },
    fetch() {
      getCommodity()
        .then((data) => {
          var res = data.data.data;
          // console.log(res);
          res.map((val) => {
            if (val.id == this.comIdObj.comId) {
              this.tableData = val;
              this.tableData.specifications.map((list) => {
                this.supArr.push(list);
              });
            }
          });
          res.forEach((item) => {
            if (item.id == this.comIdObj.comId) {
              var line = item.imgpath.indexOf("files") + 6;
              item.imgpath =
                "http://localhost:5000/" + item.imgpath.slice(line);
              this.urll = item.imgpath;
            }
          });
        })
        .catch((err) => {
          console.log(err);
        }),
        //通过商品Id查找其详情图片
        findDetaildImgsByCommodityId(this.comIdObj.comId)
          .then((data) => {
            var res = data.data.data;
            // console.log(res.detailsChart);
            res.detailsChart.map((val) => {
              // console.log(val);
              var line = val.imgPaht.indexOf("files") + 6;
              val.imgPaht = "http://localhost:5000/" + val.imgPaht.slice(line);
              // console.log(val.imgPaht);
              this.urls.pictureUrl.push(val.imgPaht);
              // this.urls.m/
              console.log(this.urls.pictureUrl);
            });
          })
          .catch((err) => {
            console.log(err);
          });
    },

    //加入购物车
    addShopCart() {
      addShoppingCart({
        CommodityId: this.comIdObj.comId,
        UserId: parseInt(this.userId),
        SpecificationsId: this.specificationsid,
        CommdityNumber: this.num,
      })
        .then((data) => {
          console.log(this.num);
          console.log(parseInt(this.num));
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      this.$router.push({
        path: "/generateorderandpay",
        query: {
          id: (this.price + this.tableData.commodityCurrentPrice) * this.num,
          commodityId: this.comIdObj.comId,
        },
      });
    },
  },
  mounted() {
    this.comIdObj.comId = this.$route.query.id - 0;
    this.fetch();
  },
};
</script>

<style scoped>
/* 布局框架 */
.el-header,
.el-footer {
  background-color: #333;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-header {
  height: 40px !important;
  padding: 0 120px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 750px;
  height: 100%;
  padding: 0;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.card {
  /* width: 100%; */
  min-height: 900px;
  padding: 0 120px;
}

#box {
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

/* 其它图片 */
.block {
  float: left;
  margin: 0 10px;
  background-color: white;
  border-style: solid;
  border: 1px;
}

/* 其它图片的展示框 */
.picture-row {
  background-color: white;
  width: 100%;
  height: 100px;
}

/* 扫描框 */
.magnifier-box {
  background-color: white;
}

/* 商品图片 */
#commodity-picture {
  min-width: 500px;
  border: double;
  background-color: antiquewhite;
}

/* 商品介绍 */
#commodity-presentation {
  text-align: left;
  padding-left: 100px;
  vertical-align: top;
}

/* 商品名称 */
#commodity-name {
  font-weight: bold;
  font-size: 30px;
}

/* 商品信息 */
#commodity-info {
  min-height: 430px;
  padding: 10px;
  background-color: whitesmoke;
}

/* 彩条 */
#colour-bar {
  text-align: left;
  font-size: 25px;
  height: 40px;
  background-color: maroon;
  color: white;
  padding: 5px;
}

/* 计数器 */
.el-input-number {
  margin-top: 55px;
}

/* 评价 */
.estimate {
  margin-top: 50px;
  text-align: left;
  min-height: 500px;
}

/* 评价卡片 */
.estimate-card {
  background-color: whitesmoke;
  min-height: 150px;
}

/* 用户名 */
#username {
  font-size: 20px;
  font-weight: bold;
}

/* 评论日期 */
#date {
  position: relative;
  left: 850px;
}

/* 评论样式 */
#comment {
  margin-top: 10px;
  text-indent: 2em;
}
/* 去除ul列表的序号点 */
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
</style>